import { memo } from "react"
import styled from "@emotion/styled"

const TitleStyled = styled.div`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: 0%;
    color: #131416;
`

interface ComponentProps {
    text?: string
}

const Component: React.FC<React.PropsWithChildren<ComponentProps>> = (props) => {
    const lowerCaseText = props.text?.toLowerCase() || ""
    const capitalizedText = lowerCaseText?.charAt(0)?.toUpperCase() + lowerCaseText?.slice(1)
    return <TitleStyled>{capitalizedText}</TitleStyled>
}

export default memo(Component)
